Required knowledge: [[1. Concept - DevTools HTML as entry, Create DevTool Panel and SideBar Pane]] and [[5. Walkthrough - DevTools Panel and DevTools Sidebar Pane]].
This tutorial will walkthrough the code that lists all the css and js resources a webpage uses inside the web content's console
---
### Sneak Peak:
![[Screenshot 2025-04-05 at 10.37.36 PM.png]]
Clicking the chrome extension will just remind user how to use
## Setup
### Folder organization:
```
.
├── background.js
├── devt-panel.html
├── devtools.html
├── devtools.js
├── icon.png
├── icon128x128.png
├── icon16x16.png
├── icon32x32.png
├── icon48x48.png
├── manifest.json
├── popup.css
└── popup.html
```
### icons
Generate the icons and place them into assets-icons/ instead of the root of the chrome extension files. In previous challenges, we simply placed the icon files at the root, however that is unwise for Chrome Extension DevTools development because it can get too many files quickly.
### manifest.json:
```
{
"name": "DevTools Chrome Extension",
"description": "By Weng Fei Fung. Various demo's to teach you how to build a chrome extension to enhance the DevTools that web developers use.",
"manifest_version": 3,
"version": "1.0",
"icons": {
"16": "icon16x16.png",
"32": "icon32x32.png",
"48": "icon48x48.png",
"128": "icon128x128.png"
},
"content_security_policy": {
"extension_pages": "default-src 'self'; script-src 'self'; object-src 'self'; style-src 'self'; img-src 'self' *; connect-src 'self'"
},
"permissions": [
"activeTab",
"tabs",
"scripting"
],
"host_permissions": [
"http://*/*",
"https://*/*",
""
],
"action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"devtools_page": "devtools.html"
}
```
^ We have a popup action, mostly to have a popup appear to instruct users how to use.
^ `devtools_page` points to a html file (in this case `devtools.html`) that loads in the js file (`devtools.js`) to help initiate the different devtool presentations and logic-heavy mechanisms. Google decided on html because you can have more than one devtool.js, perhaps each named for panel, sidebar, engine, and you can add HTML comments there as well.
### Create popup.html:
- You probably don't need to remind them what shortcut to open the DevTools because if they were searching for a DevTools extension, they probably already know how to use DevTools and is looking to enhance their DevTools.
```
Document
This chrome extension reports all the css and js files that the current page is using. Open the DevTools Panel "Get Resources", then switch to "Console" tab when instructed.
```
### Create popup.css:
- So it doesn't look like a mishaped popup:
```
body {
width: 230px;
height: fit-content;
}
```
### Create `devtools.html` entry point:
```
Document
```
### Create `devtools.js`:
```
const inspectedWindow = chrome.devtools.inspectedWindow;
let panelWindow = null;
chrome.devtools.panels.create("Get Resources", "icon.png", "devt-panel.html", panel => {
// Code invoked on panel creation
panel.onShown.addListener((window) => {
panelWindow = window;
showTabId();
showResources()
}); // shown panel
});
function showTabId() {
const {tabId} = inspectedWindow;
writeToDevToolsPanel(` 1. DevTools' context is looking into inspected window (tabId: ${tabId}) for js/css resources.`);
}
function showResources() {
// let inspectedWindow = chrome.devtools.inspectedWindow;
inspectedWindow.getResources(
((resources) => {
chrome.runtime.sendMessage({ type: "dt2bg-resources", resources }, (response) => {
// From sendResponse() in background.js:
if (!response.error && response.success) {
writeToDevToolsPanel("3a. Background script received js/css resources from DevTools context");
writeToDevToolsPanel("3b. Open Console tab to see the resources.");
}
});
})
);
}
function writeToDevToolsPanel(message) {
if (panelWindow && panelWindow.document && panelWindow.document.body) {
panelWindow.document.body.innerHTML += message + " ";
}
}
```
^ devtools.js runs and initializes when user opens any devtools.js presentations. User opens "Get Resources" tab.
- On initializing, at the global scope of devtools, we captured the panelWindow and the inspectedWindow. At panel show, we console log the tab id and console log (at `showTabId`) and begin the process of console logging the resources.
- devtools.js:showResources emits message `dt2bg-resources` with the resources that have been queried from inspected window.
- background.js:onMessage responds to the message `dt2bg-resources` by console logging that it has received the messages, then it execute script against the web content by logging the resources to the console (instead of the usual writing to its html). It also replies back to the messenger origin using the sendResponse() callback provided at the parameters.
- devtools.js:showResources receive the response from background.js that status is true (`status:true`), then it prints to the DevTools panel that it's time to switch to Console tab.
### Create `background.js`:
```
let currentTabId = null;
let resources = [];
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === "dt-2-bg-resources") {
// Store the resources from the message
resources = message.resources;
// Log the resources in background console
console.log("2a. Background context received js/css resources:", resources);
console.log("2b. Background context will execute script but instead of writing to the webpage html, it will write to the webpage's console by using console.log.");
sendResponse({error: false, success: true});
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
if (tabs[0]) {
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
func: (resourcesParam) => { // Need to pass resources as a parameter
// Background context executes console log on web content
console.log("PAGE'S RESOURCES:", resourcesParam);
},
args: [resources] // Pass the resources array from background scope
});
}
});
}
});
```
### Create `devt-panel.html`:
Is a blank html that gets written to in order to tell you the resources are ready to be viewed at the web content Console, so that you know to switch tab from "Get Resources" to "Console". Initially a blank web page.
```
Document
```
---
## Testing
Install the chrome extension and play around with it. Remember that the features are accessed in DevTools (CMD+Shift+I or CMD+Shift+J)
Visit google.com
Clicking the Chrome extension will open a popup to remind you:
![[Pasted image 20250405230550.png]]
Open the DevTools with (CMD+Shift+I or CMD+Shift+J)
It's not necessary but it's recommended you open the DevTools for the popup (right click inspect the popup).
So you could have two console panels on your screen:
- Webpage's Console tab
- popup's Console tab
The code starts at devtools.js, so we need to make it run by opening panels that are in DevTools' context. Open the DevTool panel "Get Resources" to begin:
![[Screenshot 2025-04-05 at 10.37.25 PM.png]]
Notice the sequence of what's going on under the hood are numbered. Number 2 are missing because that happens in background.js which is tied to any non-DevTools presentations which is a different context from DevTools context. If you had popup console opened, you can see number 2 items:
![[Screenshot 2025-04-05 at 10.37.14 PM.png]]
Once the "Get Resources" tab says is okay to switch to "Console" tab, go ahead:
- "PAGE's RESOURCES" is technically the number 4 item.
![[Screenshot 2025-04-05 at 10.37.36 PM.png]]
You see the js/css/etc resources that google.com uses. You also see the resources' url's! It reported 33 resources have been used.
See if you can follow along the code and imagine the sequence of console logs that appear and in which context's console logs.